import { Group, Path } from 'leafer-ui'

/**
 * 创建 group1 Group
 * @param {number} width - 容器宽度
 * @param {number} height - 容器高度
 * @returns {Group} Leafer Group 实例
 */

export function createSwitch(width, height, x, y, strokeColor) {
  const baseSize = Math.min(width, height) / 70
  const group1 = new Group({
    x,
    y,
    anchor: 0.5
  })

  // 左侧三角形
  const leftTriangle = new Path({
    path: `
      M ${-baseSize} ${-baseSize / 2}
      L ${-baseSize} ${baseSize / 2}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 右侧三角形
  const rightTriangle = new Path({
    path: `
      M ${baseSize} ${-baseSize / 2}
      L ${baseSize} ${baseSize / 2}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 中间的连接线改为竖直线
  const middleLine = new Path({
    path: `
      M 0 ${-baseSize / 2}
      L 0 ${baseSize / 2}
    `,
    fill: 'none',
    stroke: strokeColor,
    strokeWidth: baseSize / 5
  })

  group1.add(leftTriangle)
  group1.add(rightTriangle)
  group1.add(middleLine)

  // 添加修改颜色的方法
  group1.updateColor = (newColor) => {
    group1.children.forEach((child) => {
      if (child.fill !== 'none') {
        child.fill = newColor
      }
      if (child.stroke !== '#fff') {
        child.stroke = newColor
      }
    })
  }

  return group1
}

export function createSwitch2(width, height, x, y, strokeColor) {
  const baseSize = Math.min(width, height) / 70
  const group1 = new Group({
    x,
    y,
    anchor: 0.5
  })

  // 左侧三角形
  const leftTriangle = new Path({
    path: `
      M ${-baseSize} ${-baseSize / 2}
      L ${-baseSize} ${baseSize / 2}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 右侧三角形
  const rightTriangle = new Path({
    path: `
      M ${baseSize} ${-baseSize / 2}
      L ${baseSize} ${baseSize / 2}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 中间的连接线改为圆形
  const middleLine = new Path({
    path: `
      M 0 0
      m ${-baseSize / 4} 0
      a ${baseSize / 4} ${baseSize / 4} 0 1 0 ${baseSize / 2} 0
      a ${baseSize / 4} ${baseSize / 4} 0 1 0 ${-baseSize / 2} 0
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  group1.add(leftTriangle)
  group1.add(rightTriangle)
  group1.add(middleLine)

  // 添加修改颜色的方法
  group1.updateColor = (newColor) => {
    group1.children.forEach((child) => {
      if (child.fill !== 'none') {
        child.fill = newColor
      }
      if (child.stroke !== '#fff') {
        child.stroke = newColor
      }
    })
  }

  return group1
}

export function createSwitch3(width, height, x, y, strokeColor) {
  const baseSize = Math.min(width, height) / 70
  const group1 = new Group({
    x,
    y,
    anchor: 0.5
  })

  // 左侧三角形旋转90度
  const leftTriangle = new Path({
    path: `
      M ${-baseSize / 2} ${-baseSize}
      L ${baseSize / 2} ${-baseSize}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 右侧三角形旋转90度
  const rightTriangle = new Path({
    path: `
      M ${-baseSize / 2} ${baseSize}
      L ${baseSize / 2} ${baseSize}
      L 0 0
      Z
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  // 中间的连接线改为圆形并旋转90度
  const middleLine = new Path({
    path: `
      M 0 0
      m 0 ${-baseSize / 4}
      a ${baseSize / 4} ${baseSize / 4} 0 1 0 0 ${baseSize / 2}
      a ${baseSize / 4} ${baseSize / 4} 0 1 0 0 ${-baseSize / 2}
    `,
    fill: strokeColor,
    stroke: '#fff',
    strokeWidth: baseSize / 10
  })

  group1.add(leftTriangle)
  group1.add(rightTriangle)
  group1.add(middleLine)

  // 添加修改颜色的方法
  group1.updateColor = (newColor) => {
    group1.children.forEach((child) => {
      if (child.fill !== 'none') {
        child.fill = newColor
      }
      if (child.stroke !== '#fff') {
        child.stroke = newColor
      }
    })
  }

  return group1
}
